<template>
  <div class="main">
    <div class="det_top_box">
      <div class="detail_header">
        <div class="det_top">
          <div>{{ data.OrgName }}</div>
          <div>
            <img
              class="dep_top_img mr-15"
              src="@/assets/Images/AppIcon/icon_qr_code.png"
              alt=""
              @click="goQRCode"
            />
            <van-uploader :after-read="afterRead">
              <!--跳转拍照-->
              <img
                class="dep_top_img"
                src="@/assets/Images/AppIcon/icon_pictures.png"
                alt=""
              />
            </van-uploader>
          </div>
        </div>
        <van-row class="det_name">{{ data.ProcedureName }}</van-row>
        <van-row class="det_location">(过程项)</van-row>
        <van-row class="mb-10 mt-20">
          <van-col span="12">
            <span class="mr-10">班 组</span>
            <span>{{ data.TeamName }}</span>
          </van-col>
          <van-col span="12">
            <span class="mr-10">岗 位</span>
            <span>{{ data.OrgPostName }}</span>
          </van-col>
        </van-row>
        <van-row class="mb-10">
          <van-col span="12">
            <span class="mr-10">修改人</span>
            <span>{{ data.EditChnName }}</span>
          </van-col>
          <van-col span="12">
            <span class="mr-10">修改时间</span>
            <span>{{ data.EditDate | formatDate }}</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="det_tab">
        <div class="det_tab_item">
          <van-tag class="mb-20" type="primary" size="large" mark
            >隐患排查</van-tag
          >
          <div class="det_tab_item_text">
            <div class="text_box">
              <div class="text_top f15 fb">实施检查</div>
              <div class="text_img">
                <div class="img_item" @click="goDangerPhoto()">
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_main_checkplan.png"
                    alt=""
                  />
                  <div>发起检查</div>
                </div>
                <!-- <div class="img_item" @click="goDangerTemplate()">
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_main_checktask.png"
                    alt=""
                  />
                  <div>检查表检查</div>
                </div> -->
                <!-- <div class="img_item" @click="goAreaPlanTaskPage()">
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_main_checkdetail.png"
                    alt=""
                  />
                  <div>计划任务</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";

export default {
  components: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data: {},
    };
  },
  mounted() {
    this.getDetailByCode();
  },
  methods: {
    // 详情
    getDetailByCode() {
      this.$axios
        .get("/SYQualityStructureAnalysis/GetDetail", {
          params: {
            code: this.$route.query.code,
          },
        })
        .then((res) => {
          this.data = res.data;
        });
    },
    getEcharts() {
      const echarts = require("echarts");
      console.log(echarts, "echarts");
      const myChart = echarts.init(document.getElementById("echarts1"));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            // name: '库存情况',
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: [
              {
                value: 45,
                name: "CARD",
              },
              {
                value: 55,
                name: "FLASH",
              },
            ],
            label: {
              normal: {
                textStyle: {
                  color: "#999",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: "#ffffff",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: ["red", "green"],
        backgroundColor: "#fff",
      };
      myChart.setOption(option, true);
    },
    goQRCode() {
      this.$router.push({
        path: "/sytechQualityStructureAnalysis/QRCode",
        query: {
          type: "SYQualityStructureAnalysis",
          code: this.data.ProcedureCode,
          name: this.data.ProcedureName,
        },
      });
    },
    // 员工信息
    goStaffInfo(item) {
      this.$router.push("/Site_RiskUnit/StaffInfo?userName=" + item.ID);
    },
    // 风险位置隐患排查任务
    goInspectRecord() {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaTaskPage",
        query: {
          areaCode: this.data.AreaCode,
          areaType: this.data.AreaType,
        },
      });
    },
    // 检查表
    goDangerTemplate() {
      this.$router.push({
        path: "/Site_RiskUnit/RiskUnitTemplate",
        query: {
          areaCode: this.data.AreaCode,
          areaName: this.data.AreaName,
          areaType: this.data.AreaType,
          areaNo: this.data.AreaNo,
          ruCode: this.data.RUCode,
        },
      });
    },
    goDangerPhoto() {
      this.$router.push({
        path: "/Danger/DangerCheckTaskDetailEdit",
        query: {
          areaCode: this.data.AreaCode,
          areaName: this.data.AreaName,
          areaType: this.data.AreaType,
          areaNo: this.data.AreaNo,
        },
      });
    },
    goPlanSiteDisposalPlan(attachCode) {
      this.$router.push({
        path: "/Plan/PlanSiteDisposalPlanView",
        query: {
          code: attachCode,
        },
      });
    },
    goAreaDetailPageData(dataType, ctCode) {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaDetailPage",
        query: {
          areaCode: this.data.AreaCode,
          dataType: dataType,
          ctCode: ctCode,
          areaType: this.data.AreaType,
        },
      });
    },

    goAreaPlanTaskPage() {
      this.$router.push({
        path: "/Site_RiskUnit/CheckAreaPlanTaskPage",
        query: {
          areaCode: this.data.AreaCode,
          areaType: this.data.AreaType,
        },
      });
    },
    // 文件页面
    goFile(attachCode) {
      if (attachCode.startsWith("GZK")) {
        getRiskNotifyCardDetail({
          code: attachCode,
        }).then((res) => {
          this.preview(res.data.Attachs);
        });
      } else {
        getRiskPointIdentifyDetailFile({
          rpCode: attachCode,
        }).then((res) => {
          this.$router.push({
            path: "/Common/PdfView",
            query: {
              url: res.data,
            },
          });
        });
      }
    },
    goAttach(attachCode) {
      this.$router.push({
        path: "/Attach/AatachDetail",
        query: {
          attCode: attachCode,
        },
      });
    },
    goEquDetail(item) {
      this.$router.push("/Equipment/Detail?equipmentCode=" + item.ID);
    },
    goChemDetail(item) {
      this.$router.push("/Chemical/Detail?ChemCode=" + item.ID);
    },
    getRiskLeveText(value) {
      var cls = "暂无";
      switch (value) {
        case "A/1级":
          cls = "重大风险";
          break;
        case "B/2级":
          cls = "较大风险";
          break;
        case "C/3级":
          cls = "一般风险";
          break;
        case "D/4级":
          cls = "低风险";
          break;
        case "E/5级":
          cls = "稍有危险";
          break;
        default:
          break;
      }
      return cls;
    },
    preview(item, index) {
      if (item) {
        let imgs = item.split(";");
        let arry = [];
        imgs.map((item, index) => {
          arry.push(this.baseUrl + item);
        });
        ImagePreview({
          images: arry,
          startPosition: index || 0,
        });
      }
    },
    afterRead(file) {
      var me = this;
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            me.$router.push({
              name: "DangerCheckTaskDetailEdit",
              query: {
                originType: 3,
                areaName: this.data.AreaName,
                areaType: this.data.AreaType,
                areaCode: this.data.AreaCode,
                areaNo: this.data.AreaNo,
              },
              params: {
                file: item.FilePath,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less">
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  font-size: 14px;
}
.main {
  height: 100%;
  font-size: 14px;
  color: #333;
}

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
  // position: fixed;
  // top:43px;
  z-index: 99;
  width: 100%;
  font-size: 14px;
  height: 180px;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    .dep_top_img {
      height: 18px;
      width: 18px;
    }
  }

  .det_name {
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-top: 10px;
  }

  .det_accident_div {
    margin-top: 15px;
    margin-bottom: 15px;
    .det_accident {
      text-align: center;
      background: #6f8edc;
      color: #fff;
      padding: 2px 10px;
      border-radius: 10px;
    }
  }
}

.det_tab {
  font-size: 12px;
  padding: 5px 10px;
  .det_tab_item {
    /*margin: 10px;*/
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

.text_box {
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f6fa;
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.riskLevel {
  .riskLevelnone {
    background: green;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 1px 3px;
  }
  .riskLevel1 {
    background: #ff0000;
  }
  .riskLevel2 {
    background: #ffc000;
  }
  .riskLevel3 {
    background: #ffff00;
    color: #666;
  }
  .riskLevel5 {
    background: #00b0f0;
  }
}
.user-imgs {
  width: 15px;
  height: 15px;
  vertical-align: bottom;
  position: absolute;
}
.user-name {
  display: inline-block;
  width: 100%;
  margin-left: 17px;
}
.tab-item-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;

  .look-detail {
    font-size: 13px;
    color: #1989fa;
  }
}
.none {
  font-size: 12px;
  color: #999;
}
.risk-unit-name {
  img {
    width: 14px;
    height: 15px;
    vertical-align: middle;
    margin-right: 10px;
  }
  font-size: 13px;
  color: #1989fa;
}
.fenxian {
  background-color: #f2f6fa;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.RiskPointName {
  font-size: 12px;
}
.att-name {
  color: #1989fa;
  line-height: 32px;
}
img {
  width: 14px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}
.att-name-btns {
  display: flex;
  align-items: center;
}
</style>
